<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<!--<script src="//unpkg.com/layui@2.6.8/dist/layui.js">-->
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <span>退款单号:&nbsp;{$row.order_id} &nbsp;&nbsp;</span>
                <span>退款类型:&nbsp;{$row.refundStatus}&nbsp;&nbsp;</span>
                <span>退货方式:&nbsp;单个物品退款</span>
            </div>
        </div>
        <div class="ul-padding-md">
            <ul class="layui-timeline ul-timeline-rowstyle">
                <label class="layui-form-label"></label>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title ">买家 申请退款</h3>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">
                            {if $row.refundAgree}
                            商家同意退款
                            {else}
                            <font color="#c5c5c7">商家同意退款</font>
                            {/if}
                        </h3>

                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">
                            {if $row.refundSuc}
                            退款成功
                            {else}
                            <font color="#c5c5c7">退款成功</font>
                            {/if}
                        </h3>
                    </div>
                </li>
            </ul>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline" style="width: 30%;">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline" style="width: 50%;">
                    <span class="box-bold">退货详情</span><br/>
                    <span>订单编号:&nbsp;{$row['orderId']}</span><br/>
                    <span>订单实付总额:&nbsp;&nbsp;{$row['payPrice']}</span><br/>
                    <span>退款金额:&nbsp;&nbsp;{$row['refund_price']}元 + {$row['useIntegral']}积分 + {$row['couponPrice']}元优惠券</span><br/>
                    <span>申请时间:&nbsp;&nbsp;{$row['add_time']}</span><br/>
                    <span>退款原因:&nbsp;&nbsp;{$row['refund_reason']}</span><br/>
                    <span>退款说明:&nbsp;&nbsp;{$row['refund_explain']}</span><br/>
                </div>
            </div>
            <div class="layui-inline" style="width: 10%;">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <span class="box-bold">退货凭证</span><br/>
                    {foreach $row['refundImg'] as $v}
                    <span><img src="{$v}" width="100%" data-image="测试图片放大"></span><br/>
                    {/foreach}
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline layui-layout-body" style="width: 300px" >
                    <span class="box-bold">原订单物流状态:&nbsp;&nbsp;<font color="red">{$row['expressStatu']}</font></span><br/>
                    <span class="box-bold">原订单物流公司:&nbsp;&nbsp;<font color="red">{$row['delivery_name']}</font></span><br/>
                    <span class="box-bold">原订单物流单号:&nbsp;&nbsp;<font color="red">{$row['delivery_id']}</font></span><br/><br/>
                    <div>
                        {foreach $row['express'] as $v}
                        <span><font color="gray">{$v['time']}</font></span><br/>
                        <span>{$v['status']}</span><br/><br/>
                        {/foreach}
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline layui-layout-body" style="width: 300px">
                    <span class="box-bold">退货物流状态:&nbsp;&nbsp;<font color="red">{$row['refundExpressStatu']}</font></span><br/>
                    <span class="box-bold">退货物流公司:&nbsp;&nbsp;<font color="red">{$row['refundDeliveryName']}</font></span><br/>
                    <span class="box-bold">退货物流单号:&nbsp;&nbsp;<font color="red">{$row['refundDeliveryId']}</font></span><br/><br/>
                    <div>
                        {foreach $row['refundExpress'] as $v}
                        <span><font color="gray">{$v['time']}</font></span><br/>
                        <span>{$v['status']}</span><br/><br/>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" >
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <span class="box-bold">退款人信息</span><br/>
                    <span>收货人:&nbsp;&nbsp;{$row['real_name']}</span><br/>
                    <span>联系电话:&nbsp;&nbsp;{$row['user_phone']}</span><br/>
                    <span>收货地址:&nbsp;&nbsp;{$row['user_address']}</span><br/>
                </div>
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>退款商品名称</th>
                        <th>所属货仓</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>实付金额</th>
                        <th>退款金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        {foreach $row['products'] as $v}
                        <td><img src="{$v.image}" width="150px">{$v.store_name}</td>
                        <td>{$v.hcName}</td>
                        <td>{$v.price}</td>
                        <td>{$v.cart_num}</td>
                        <td>{$v.sumPrice}</td>
                        <td>{$v.payPrice}</td>
                        <td>{$v.refundPrice}元+{$v.refundIntegral}积分</td>
                        {/foreach}
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <span class="box-bold">订单日志</span><br/><br/>
                <span class="box-color">
                    {foreach $refundLog as $vl}
                        <span>{$vl['change_time']} &nbsp;&nbsp;{$vl['change_message']}</span><br/>
                    {/foreach}
                </span>
            </div>
        </div>
    </form>
</div>
<style>
    .gray-color{
        color: gray;
    }
    .box-bold{
        font-weight:bold;
    }
    .box-color{
        color: #1e9fff;
    }
    .layui-text h1, .layui-text h2, .layui-text h3 {
        color: #1e9fff;
    }
    .layui-text{
        color: #1e9fff;
    }
    .box{
        text-align: right;
    }
    .marginLeft{
        margin-left: 50px;
    }

    .ul-timeline-rowstyle {
        display   : flex;
        flex-wrap : nowrap;
        overflow-x: auto;
        width     : 100%;
    }

    .ul-timeline-rowstyle .layui-timeline-item {
        /*margin-right: 15px;*/
        /*min-width   : 300px;*/
        margin-left: 50px;
        min-width   : 130px;
    }

    .ul-timeline-rowstyle .layui-timeline-item:last-child::before {
        display: block;
    }
    /*添加垂直滚动条*/
    .layui-layout-body {
        height: 100px;
        overflow-y: auto;
    }
</style>
